<script setup lang="ts">
	import {onLoad} from '@dcloudio/uni-app';
	import {CSSProperties, computed, ref} from 'vue';
	import apiOrder from '@/util/network_api/apiOrder.js';
	import {endField, module as fixedModule} from '@/config/order';
	import pdf from '@/static/pdf.png';
	import apiUpload from '@/util/network_api/upload.js';
	import {useUploadImageOrVideo} from '@/hooks/useAppPlus';
	import apiUser from '@/util/network_api/user.js';

	interface CustomTemplateField {
		content: Array<string>;
		id: string;
		name: string;
		required: boolean;
		status: null | boolean;
		tip: string;
		type: number;
		uploadQty: number;
		uploadSize: number;
		value: string;
		valueList: Array<string>;
		fileList: Array<{
			path: string;
			file: File;
		}>;
	}

	interface TempForm {
		statementWriteOffCode: string;
		templateList: Array<{
			id: string;
			name: string;
			templateFieldVos: Array<CustomTemplateField>;
		}>;
	}

	interface Form {
		remark: string;
		statementWriteOffCode: string;
		templateVos: Array<{
			fieldValVos: Array<{
				fieldId: string;
				id: string;
				name: String;
				optVos: Array<{
					id: string;
					optValue: string;
				}>;
				type: number;
			}>;
			id: string;
		}>;
	}

	const serviceReceiptImageUrlList = ref<Array<{file: File; path: string}>>([]);

	/**
	 * 判断当前浏览器是否为safari，如果是返回true，否则返回false
	 */
	const isCurrentBrowserSafari = computed(() => {
		if (navigator.userAgent) {
			return (
				/Safari/.test(navigator.userAgent) &&
				!/Chrome/.test(navigator.userAgent)
			);
		}

		return false;
	});

	/**
	 * 提交按钮样式
	 */
	const submitBtnStyle = computed<CSSProperties>(() => {
		if (isCurrentBrowserSafari.value) {
			return {
				marginBottom: '160rpx',
			};
		} else {
			return {
				marginBottom: '0rpx',
			};
		}
	});

	// 表单组件实例
	const formInstance = ref();

	// 视频预览弹窗组件实例
	const videoPreviewPopupInstance = ref();

	// 表单
	const form = ref<Form>({
		remark: '',
		statementWriteOffCode: '',
		templateVos: [],
	});

	// 工单id
	const orderId = ref('');

	// 结单信息
	const endInfo = ref({
		content: '',
		createTime: '',
		enableStatementVerifCode: false,
		lekaiOrder: false,
		module: '',
		moduleId: '',
		teleCustomProIdenCode: '',
		userPhone: '',
		username: '',
		workNo: '',
	});

	// 结单模板列表
	const tempForm = ref<TempForm>({
		statementWriteOffCode: '',
		templateList: [],
	});

	// 核销码发送倒计时
	const verificationCodeCountDown = ref(0);

	// 是否已经发送了核销码
	const isSendedVerificationCode = ref(false);

	// 发送核销码定时器
	const sendVerificationCodeTimer = ref<NodeJS.Timeout | null>(null);

	// 需要隐藏的自定义字段id集合
	const needHideCustomFieldIdList = ref<Array<string>>([
		endField.new_ctei_code,
		endField.new_product_type,
	]);

	// 当前正在预览的视频路径
	const currentPreviewVideoPath = ref('');

	// 字段额外的校验规则
	const fieldMoreRules = ref({
		cteiCodeLengthMust15: {
			validateFunction: (rule, value, data, callback) => {
				if (!!value && value.length !== 15) {
					callback('CTEI码必须为15位');
				}
				return true;
			},
		},
	});

	/**
	 * 获取结单信息
	 */
	const getEndInfo = async () => {
		try {
			const res = await apiOrder.getNetworkStatementInfo(orderId.value);
			if (res.code === 20000) {
				endInfo.value = res.data.row;
			}
		} catch (error) {
			// error
		}
	};

	/**
	 * 获取自定义字段列表
	 */
	const getEndTemplateList = async () => {
		try {
			const res = await apiOrder.getFinishOrderTemplateField(orderId.value);
			if (res.code === 20000) {
				tempForm.value.templateList = res.data.rows;
				tempForm.value.templateList = tempForm.value.templateList.map(
					(template) => {
						return {
							id: template.id,
							name: template.name,
							templateFieldVos: template.templateFieldVos.map((field) => {
								return {
									...field,
									value: '',
									valueList: [],
									fileList: [],
								};
							}),
						};
					},
				);
			}
		} catch (error) {
			// error
		}
	};

	/**
	 * 核销码发送点击事件
	 */
	const onSendVerificationCodeClick = () => {
		isSendedVerificationCode.value = true;
		verificationCodeCountDown.value = 59;
		sendVerificationCodeTimer.value = setInterval(() => {
			verificationCodeCountDown.value -= 1;
			if (verificationCodeCountDown.value == 0) {
				clearInterval(sendVerificationCodeTimer.value);
			}
		}, 1000);
		uni.showLoading({
			title: '发送中...',
			mask: true,
		});
		apiOrder
			.getNetworkWriteOffCode(orderId.value)
			.then((res) => {
				if (res.code === 20000) {
					uni.showToast({
						title: '发送成功',
						icon: 'none',
					});
				}
			})
			.finally(() => {
				uni.hideLoading();
			});
	};

	/**
	 * 隐藏手机号中间的部分
	 * @param phone - 需要被隐藏的手机号
	 */
	const hidePhone = (phone: string) => {
		let tem = phone.slice(0, 3) + '****' + phone.slice(phone.length - 4);
		return tem;
	};

	/**
	 * 选择图片按钮点击事件
	 * @param field - 字段对象
	 * @param templateIndex - 模板索引
	 * @param fieldIndex - 字段索引
	 */
	const handleUploadImageClick = (
		field: CustomTemplateField,
		templateIndex: number,
		filedIndex: number,
	) => {
		uni.chooseImage({
			count: field.uploadQty,
			success: (res) => {
				for (let i = 0; i < res.tempFiles.length; i++) {
					const file = res.tempFiles[i];
					if (file.size / 1024 / 1024 > field.uploadSize * 1024) {
						uni.showToast({
							title: `图片大小只能为${field.uploadSize}MB`,
							mask: true,
							icon: 'none',
						});
					} else if (field.fileList.length >= field.uploadQty) {
						uni.showToast({
							title: `最多上传${field.uploadQty}个文件`,
							mask: true,
							icon: 'none',
						});
					} else {
						tempForm.value.templateList[templateIndex].templateFieldVos[
							filedIndex
						].fileList.push({
							path: file.path,
							file,
						});
					}
				}
			},
		});
	};

	/**
	 * 选择视频按钮点击事件
	 * @param field - 字段对象
	 * @param templateIndex - 模板索引
	 * @param fieldIndex - 字段索引
	 */
	const handleUploadVideoClick = (
		field: CustomTemplateField,
		templateIndex: number,
		filedIndex: number,
	) => {
		uni.chooseVideo({
			count: field.uploadQty,
			success: (res) => {
				if (res.size / 1024 / 1024 > field.uploadSize) {
					uni.showToast({
						title: `文件大小最大只能为${field.uploadSize}MB`,
						mask: true,
						icon: 'none',
					});
				} else if (field.fileList.length >= field.uploadQty) {
					uni.showToast({
						title: `最多上传${field.uploadQty}个文件`,
						mask: true,
						icon: 'none',
					});
				} else {
					tempForm.value.templateList[templateIndex].templateFieldVos[
						filedIndex
					].fileList.push({
						path: res.tempFilePath,
						file: res.tempFile,
					});
				}
			},
		});
	};

	/**
	 * APP端的选择图片和视频事件
	 * @param field - 字段对象
	 * @param templateIndex - 模板索引
	 * @param fieldIndex - 字段索引
	 */
	const handleUploadImgOrVideoForApp = async (
		field: CustomTemplateField,
		templateIndex: number,
		filedIndex: number,
		mode: 'image' | 'video',
	) => {
		const res = await useUploadImageOrVideo(mode, field.uploadQty);
		res.forEach((file) => {
			if (file.file.size / 1024 / 1024 > field.uploadSize) {
				uni.showToast({
					title: `文件大小最大只能为${field.uploadSize}MB`,
					mask: true,
					icon: 'none',
				});
			} else if (field.fileList.length >= field.uploadQty) {
				uni.showToast({
					title: `最多上传${field.uploadQty}个文件`,
					mask: true,
					icon: 'none',
				});
			} else {
				tempForm.value.templateList[templateIndex].templateFieldVos[
					filedIndex
				].fileList.push({
					path: file.path,
					file: Object.assign(file.file, {path: file.path}),
				});
			}
		});
	};

	const onUploadServiceReceiptImageForApp = async () => {
		const res = await useUploadImageOrVideo('image', 10);
		res.forEach((file) => {
			if (file.file.size / 1024 / 1024 > 100) {
				uni.showToast({
					title: `图片最大只能为100MB`,
					mask: true,
					icon: 'none',
				});
			} else if (serviceReceiptImageUrlList.value.length >= 10) {
				uni.showToast({
					title: '最多上传10个文件',
					mask: true,
					icon: 'none',
				});
			} else {
				serviceReceiptImageUrlList.value.push({
					path: file.path,
					file: Object.assign(file.file, {path: file.path}),
				});
			}
		});
	};

	const onUploadServiceReceiptImageForH5 = () => {
		uni.chooseImage({
			count: 10,
			success: (res) => {
				for (let i = 0; i < res.tempFiles.length; i++) {
					const file = res.tempFiles[i];
					if (file.size / 1024 / 1024 > 100) {
						uni.showToast({
							title: `图片最大只能为100MB`,
							mask: true,
							icon: 'none',
						});
					} else if (serviceReceiptImageUrlList.value.length >= 10) {
						uni.showToast({
							title: '最多10张图片',
							mask: true,
							icon: 'none',
						});
					} else {
						serviceReceiptImageUrlList.value.push({
							path: file.path,
							file,
						});
					}
				}
			},
		});
	};

	/**
	 * 视频点击事件
	 * @param templateIndex - 模板索引
	 * @param fieldIndex - 字段索引
	 * @param videoIndex - 视频索引
	 */
	const handleVideoClick = (
		templateIndex: number,
		fieldIndex: number,
		videoIndex: number,
	) => {
		const template = tempForm.value.templateList[templateIndex];
		if (!template) {
			return false;
		}

		const field = template.templateFieldVos[fieldIndex];
		if (!field) {
			return false;
		}

		const videoPath = field.fileList[videoIndex];
		if (!videoPath || !videoPreviewPopupInstance.value) {
			return false;
		}

		currentPreviewVideoPath.value = videoPath.path;
		videoPreviewPopupInstance.value.open();
	};

	/**
	 * 隐藏视频预览弹窗
	 */
	const closeVideoPreviewPopup = () => {
		if (videoPreviewPopupInstance.value) {
			currentPreviewVideoPath.value = '';
			videoPreviewPopupInstance.value.close();
		}
	};

	/**
	 * 文件删除事件
	 * @param templateIndex - 模板索引
	 * @param fieldIndex - 字段索引
	 * @param fileIndex - 文件索引
	 */
	const handleFileDelClick = (
		templateIndex: number,
		fieldIndex: number,
		fileIndex: number,
	) => {
		const template = tempForm.value.templateList[templateIndex];
		if (!template) {
			return false;
		}

		const field = template.templateFieldVos[fieldIndex];
		if (!field) {
			return false;
		}

		tempForm.value.templateList[templateIndex].templateFieldVos[
			fieldIndex
		].fileList.splice(fileIndex, 1);
	};

	/**
	 * pdf选择事件
	 * @param res - 事件回调参数
	 * @param templateIndex - 模板索引
	 * @param fieldIndex - 字段索引
	 */
	const handlePdfSelect = (res, templateIndex: number, fieldIndex: number) => {
		const template = tempForm.value.templateList[templateIndex];
		if (!template) {
			return false;
		}

		const field = template.templateFieldVos[fieldIndex];
		if (!field) {
			return false;
		}

		for (let i = 0; i < res.tempFiles.length; i++) {
			const file = res.tempFiles[i];
			if (file.size / 1024 / 1024 > field.uploadSize) {
				uni.showToast({
					title: `最大大小只能为${field.uploadSize}MB`,
					mask: true,
					icon: 'none',
				});
			} else if (
				tempForm.value.templateList[templateIndex].templateFieldVos[fieldIndex]
					.fileList.length >= field.uploadQty
			) {
				uni.showToast({
					title: `最多上传${field.uploadQty}个文件`,
					mask: true,
					icon: 'none',
				});
			} else {
				tempForm.value.templateList[templateIndex].templateFieldVos[
					fieldIndex
				].fileList.push({
					path: file.path,
					file: file.file,
				});
			}
		}
	};

	/**
	 * 移除隐藏后的字段id
	 * @param fieldId - 字段id
	 */
	const removeHiedFieldId = (fieldId: String) => {
		const index = needHideCustomFieldIdList.value.findIndex(
			(id) => id === fieldId,
		);
		if (index >= 0) {
			needHideCustomFieldIdList.value.splice(index, 1);
		}
	};

	/**
	 * 添加需要隐藏的字段
	 */
	const addNeedHideFieldId = (fieldId: string) => {
		if (!needHideCustomFieldIdList.value.includes(fieldId)) {
			needHideCustomFieldIdList.value.push(fieldId);
		}
	};

	/**
	 * 设置字段的必填状态
	 * @param templateId - 模板id
	 * @param fieldId - 字段id
	 * @param isRequired - 是否为必填
	 */
	const setFieldRequired = (
		templateId: string,
		fieldId: string,
		isRequired: boolean,
	) => {
		for (let i = 0; i < tempForm.value.templateList.length; i++) {
			const template = tempForm.value.templateList[i];
			if (template.id === templateId) {
				for (let j = 0; j < template.templateFieldVos.length; j++) {
					const field = template.templateFieldVos[j];
					if (field.id === fieldId) {
						tempForm.value.templateList[i].templateFieldVos[j].required =
							isRequired;
					}
				}
			}
		}
	};

	/**
	 * 单选选择事件
	 * @param templateIndex - 模板索引
	 * @param fieldIndex - 字段索引
	 */
	const handleSingleSelect = (templateIndex: number, fieldIndex: number) => {
		if (!endInfo.value) {
			return false;
		}

		const template = tempForm.value.templateList[templateIndex];
		if (!template) {
			return false;
		}

		const field = template.templateFieldVos[fieldIndex];
		if (!field) {
			return false;
		}

		if (field.id !== endField.is_can_repair) {
			return false;
		}

		if (field.value === '可以维修') {
			addNeedHideFieldId(endField.new_ctei_code);
			addNeedHideFieldId(endField.new_product_type);

			if (endInfo.value.teleCustomProIdenCode !== null) {
				setFieldRequired(template.id, endField.old_ctei_code, true);
				setFieldRequired(template.id, endField.new_ctei_code, false);
			}
		}

		if (field.value === '无法维修') {
			removeHiedFieldId(endField.new_ctei_code);
			removeHiedFieldId(endField.new_product_type);

			if (endInfo.value.teleCustomProIdenCode !== null) {
				setFieldRequired(template.id, endField.old_ctei_code, true);
				setFieldRequired(template.id, endField.new_ctei_code, true);
			}
		}
	};

	/**
	 * pdf文件点击事件
	 * @param templateIndex - 模板索引
	 * @param fieldIndex - 字段索引
	 * @param fileIndex - 文件索引
	 */
	const handlePdfClick = (
		templateIndex: number,
		fieldIndex: number,
		fileIndex: number,
	) => {
		const template = tempForm.value.templateList[templateIndex];
		if (!template) {
			return false;
		}

		const field = template.templateFieldVos[fieldIndex];
		if (!field) {
			return false;
		}

		uni.openDocument({
			filePath: field.fileList[fileIndex].path,
			fileType: 'pdf',
			success: function (res) {},
			fail: function (err) {
				uni.showToast({
					icon: 'none',
					title: err,
				});
			},
		});
	};

	/**
	 * 提交点击事件
	 */
	const onSubmitClick = async () => {
		if (!formInstance.value) {
			return false;
		}

		if (
			serviceReceiptImageUrlList.value.length <= 0 &&
			[fixedModule.c_item_install, fixedModule.c_item_repair].includes(
				endInfo.value.moduleId,
			)
		) {
			uni.showModal({
				title: '提示',
				content: '请上传服务签收单图片',
			});
			return;
		}

		try {
			await formInstance.value.validate();
			uni.showLoading({
				title: '加载中',
				mask: true,
			});

			if (
				[fixedModule.c_item_install, fixedModule.c_item_repair].includes(
					endInfo.value.moduleId,
				)
			) {
				const serviceReceiptFileList = serviceReceiptImageUrlList.value.filter(
					(item) => !!item.file,
				);

				for (let i = 0; i < serviceReceiptFileList.length; i++) {
					const imgUploadResult = await apiUser.uploadAvatar({
						files: serviceReceiptFileList[i].file,
					});
					if (imgUploadResult.code === 20000) {
						serviceReceiptFileList[i].path = imgUploadResult.data.rows;
					}
				}

				await apiOrder.uploadServiceReceiptImage({
					id: orderId.value,
					urls: serviceReceiptFileList.map((item) => item.path),
				});
			}

			for (let i = 0; i < tempForm.value.templateList.length; i++) {
				const template = tempForm.value.templateList[i];
				for (let j = 0; j < template.templateFieldVos.length; j++) {
					const field = template.templateFieldVos[j];
					if (field.fileList.length > 0) {
						const tempUrlList: Array<string> = [];
						for (
							let fileIndex = 0;
							fileIndex < field.fileList.length;
							fileIndex++
						) {
							if ([5, 6].includes(field.type)) {
								const imgUploadResult = await apiUser.uploadAvatar({
									files: field.fileList[fileIndex].file,
								});
								if (imgUploadResult.code === 20000) {
									tempUrlList.push(imgUploadResult.data.rows);
								}
							}

							if (field.type === 7) {
								const videoUploadResult = await apiUpload.orderVideoUpload({
									files: field.fileList[fileIndex].file,
								});
								if (videoUploadResult.code === 20000) {
									tempUrlList.push(videoUploadResult.data.rows[0]);
								}
							}
						}
						tempForm.value.templateList[i].templateFieldVos[j].fileList =
							tempUrlList.map((imgUrl, imgUrlIndex) => {
								return {
									path: imgUrl,
									file: field.fileList[imgUrlIndex].file,
								};
							});
					}
				}
			}

			form.value.statementWriteOffCode = tempForm.value.statementWriteOffCode;
			form.value.templateVos = tempForm.value.templateList.map((template) => {
				return {
					id: template.id,
					fieldValVos: template.templateFieldVos.map((field) => {
						let value: Array<{id: string; optValue: string}> = [];

						if ([5, 6, 7].includes(field.type)) {
							value = field.fileList.map((file) => {
								return {
									id: '',
									optValue: file.path,
								};
							});
						} else if (field.type === 4) {
							value = field.valueList.map((val) => {
								return {
									id: '',
									optValue: val,
								};
							});
						} else {
							value = [
								{
									id: '',
									optValue: field.value,
								},
							];
						}

						return {
							fieldId: field.id,
							id: '',
							name: field.name,
							optVos: value,
							type: field.type,
						};
					}),
				};
			});

			const res = await apiOrder.networkApplyFinishOrder(
				form.value,
				orderId.value,
			);
			if (res.code == 20000) {
				uni.hideLoading();
				uni.showToast({
					title: res.message,
					icon: 'success',
				});
				uni.setStorageSync('order_detail', 1);
				setTimeout(() => {
					form.value = {
						remark: '',
						statementWriteOffCode: '',
						templateVos: [],
					};
					tempForm.value = {
						statementWriteOffCode: '',
						templateList: [],
					};
					uni.redirectTo({
						url: '/pages/pages_network/order/detail?workId=' + orderId.value,
					});
				}, 800);
			}

			uni.hideLoading();
		} catch (error) {
			// error
			uni.hideLoading();
		}
	};

	onLoad(async (e) => {
		if (!e.workId) return;
		orderId.value = e.workId;
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		await getEndInfo();
		await getEndTemplateList();
		uni.hideLoading();
	});
</script>

<template>
	<view class="apply-end-order">
		<view class="end-info">
			<view class="title">
				<view class="order-no">{{ endInfo.workNo }}</view>
				<view class="module">{{ endInfo.module }}</view>
			</view>
			<view class="info-line">
				<view class="label">客户信息:</view>
				<view class="value">
					{{ endInfo.username }}&nbsp;{{ hidePhone(endInfo.userPhone) }}
				</view>
			</view>
			<view class="info-line">
				<view class="label">报单时间:</view>
				<view class="value">{{ endInfo.createTime }}</view>
			</view>
			<view class="info-line">
				<view class="label">工单描述:</view>
				<view class="value">{{ endInfo.content }}</view>
			</view>
		</view>
		<view class="custom-field-list">
			<uni-forms
				ref="formInstance"
				:modelValue="tempForm"
				:err-show-type="'modal'"
			>
				<view class="form-content">
					<uni-forms-item
						label="核销码"
						v-if="endInfo.enableStatementVerifCode"
						required
						name="statementWriteOffCode"
						:rules="[
							{
								required: true,
								errorMessage: '请输入核销码',
							},
						]"
					>
						<view class="send-verification-code">
							<uni-easyinput
								type="number"
								:disabled="!isSendedVerificationCode && !endInfo.lekaiOrder"
								maxlength="6"
								v-model.trim="tempForm.statementWriteOffCode"
								placeholderStyle="font-size:24rpx;"
								placeholder="请输入核销码"
							/>
							<template v-if="!endInfo.lekaiOrder">
								<span
									class="send-btn"
									@click="onSendVerificationCodeClick"
									v-if="verificationCodeCountDown === 0"
								>
									发送
								</span>
								<span v-else class="count-down">
									{{ `${verificationCodeCountDown}s` }}
								</span>
							</template>
						</view>
					</uni-forms-item>

					<template
						v-for="(template, templateIndex) in tempForm.templateList"
						:key="templateIndex"
					>
						<uni-section :title="template.name" type="line"></uni-section>
						<template
							v-for="(field, fieldIndex) in template.templateFieldVos"
							:key="fieldIndex"
						>
							<uni-forms-item
								:label="`${field.name}${
									[5, 6, 7].includes(field.type)
										? '（' +
										  field.fileList.length +
										  '/' +
										  field.uploadQty +
										  '）'
										: ''
								}`"
								:name="`templateList[${templateIndex}].templateFieldVos[${fieldIndex}].${
									[5, 6, 7].includes(field.type)
										? 'fileList'
										: field.type === 4
										? 'valueList'
										: 'value'
								}`"
								:required="field.required"
								v-show="!needHideCustomFieldIdList.includes(field.id)"
								:rules="[
									{
										required: field.required,
										errorMessage: field.tip || `${field.name}位必填项`,
									},
									[
										endField.old_ctei_code,
										endField.new_ctei_code,
										endField.c_end_installation_statement_ctei_code,
									].includes(field.id)
										? fieldMoreRules.cteiCodeLengthMust15
										: {},
								]"
							>
								<!-- 单行文本 -->
								<uni-easyinput
									v-if="field.type === 1"
									placeholderStyle="font-size: 24rpx;"
									:placeholder="field.tip || `请输入${field.name}`"
									v-model.trim="field.value"
								/>

								<!-- 多行文本 -->
								<uni-easyinput
									trim="right"
									autoHeight
									type="textarea"
									v-if="field.type === 2"
									placeholderStyle="font-size:28rpx;"
									:placeholder="field.tip || `请输入${field.name}`"
									v-model.trim="field.value"
								/>

								<!-- 单选 -->
								<uni-data-select
									v-if="field.type === 3"
									:localdata="
										field.content.map((item) => {
											return {
												text: item,
												value: item,
											};
										})
									"
									v-model="field.value"
									@change="handleSingleSelect(templateIndex, fieldIndex)"
								></uni-data-select>

								<!-- 多选4 -->
								<uni-data-checkbox
									v-if="field.type === 4"
									multiple
									:localdata="
										field.content.map((item) => {
											return {
												text: item,
												value: item,
											};
										})
									"
									v-model="field.valueList"
								></uni-data-checkbox>

								<!-- 图片 -->
								<!-- #ifdef H5 || MP-WEIXIN -->
								<view
									v-if="
										field.type === 5 && field.fileList.length < field.uploadQty
									"
									class="choose-image-btn"
									@click="
										handleUploadImageClick(field, templateIndex, fieldIndex)
									"
								>
									点击选择{{ field.name }}
								</view>
								<!-- #endif -->

								<!-- #ifdef APP-PLUS -->
								<view
									v-if="
										field.type === 5 && field.fileList.length < field.uploadQty
									"
									class="choose-image-btn"
									@click="
										handleUploadImgOrVideoForApp(
											field,
											templateIndex,
											fieldIndex,
											'image',
										)
									"
								>
									点击选择{{ field.name }}
								</view>
								<!-- #endif -->

								<!-- 附件 -->
								<view v-if="field.type === 6" class="choose-image-btn">
									<uni-file-picker
										:auto-upload="false"
										:limit="field.uploadQty"
										file-mediatype="all"
										file-extname="pdf"
										:mode="'grid'"
										:disable-preview="true"
										@select="
											(res) => handlePdfSelect(res, templateIndex, fieldIndex)
										"
									>
										<template v-if="field.fileList.length < field.uploadQty">
											点击选择{{ field.name }}
										</template>
									</uni-file-picker>
								</view>

								<!-- 视频 -->
								<!-- #ifdef H5 || MP-WEIXIN -->
								<view
									v-if="
										field.type === 7 && field.fileList.length < field.uploadQty
									"
									class="choose-image-btn"
									@click="
										handleUploadVideoClick(field, templateIndex, fieldIndex)
									"
								>
									点击选择{{ field.name }}
								</view>
								<!-- #endif -->

								<!-- #ifdef APP-PLUS -->
								<view
									v-if="
										field.type === 7 && field.fileList.length < field.uploadQty
									"
									class="choose-image-btn"
									@click="
										handleUploadImgOrVideoForApp(
											field,
											templateIndex,
											fieldIndex,
											'video',
										)
									"
								>
									点击选择{{ field.name }}
								</view>
								<!-- #endif -->

								<!-- 评分 -->
								<uni-rate
									v-if="field.type === 8"
									margin="10"
									class="select-rate"
									v-model="field.value"
								/>
							</uni-forms-item>

							<!-- 图片列表 -->
							<view
								class="file-list"
								v-if="
									field.type === 5 &&
									field.fileList &&
									field.fileList.length > 0
								"
							>
								<view
									class="file-item"
									v-for="(img, imgIndex) in field.fileList"
									:key="imgIndex"
								>
									<image class="file" :src="img.path"></image>

									<view
										class="del-btn"
										@click="
											handleFileDelClick(templateIndex, fieldIndex, imgIndex)
										"
									>
										<uni-icons
											type="closeempty"
											size="20"
											color="#fff"
										></uni-icons>
									</view>
								</view>
							</view>

							<!-- 附件列表 -->
							<view
								class="file-list"
								v-if="
									field.type === 6 &&
									field.fileList &&
									field.fileList.length > 0
								"
							>
								<view
									class="file-item"
									v-for="(pdf, pdfIndex) in field.fileList"
									:key="pdfIndex"
								>
									<view
										class="file-pdf"
										@click="handlePdfClick(templateIndex, fieldIndex, pdfIndex)"
									>
										PDF
									</view>

									<view
										class="del-btn"
										@click="
											handleFileDelClick(templateIndex, fieldIndex, pdfIndex)
										"
									>
										<uni-icons
											type="closeempty"
											size="20"
											color="#fff"
										></uni-icons>
									</view>
								</view>
							</view>

							<!-- 视频列表 -->
							<view
								class="file-list"
								v-if="
									field.type === 7 &&
									field.fileList &&
									field.fileList.length > 0
								"
							>
								<view
									class="file-item"
									v-for="(video, videoIndex) in field.fileList"
									:key="videoIndex"
								>
									<video
										class="file"
										:src="video.path"
										:show-fullscreen-btn="false"
										:show-play-btn="false"
										:show-center-play-btn="false"
										:enable-progress-gesture="false"
										:show-loading="false"
										:controls="false"
										@click="
											handleVideoClick(templateIndex, fieldIndex, videoIndex)
										"
									></video>

									<view
										class="del-btn"
										@click="
											handleFileDelClick(templateIndex, fieldIndex, videoIndex)
										"
									>
										<uni-icons
											type="closeempty"
											size="20"
											color="#fff"
										></uni-icons>
									</view>
								</view>
							</view>
						</template>
					</template>

					<uni-forms-item
						label="服务签收单图片（服务商）"
						v-if="
							[fixedModule.c_item_install, fixedModule.c_item_repair].includes(
								endInfo.moduleId,
							)
						"
					>
						<template #label>
							<view>
								<text style="color: #f56c6c">*</text>
								<text style="font-size: 24rpx; color: #808080">
									服务签收单图片
								</text>
							</view>
						</template>

						<!-- #ifdef H5 || MP-WEIXIN -->
						<view
							class="choose-image-btn"
							@click="onUploadServiceReceiptImageForH5"
							v-if="serviceReceiptImageUrlList.length < 10"
						>
							点击选择图片({{ serviceReceiptImageUrlList.length }}/10)
						</view>
						<!-- #endif -->

						<!-- #ifdef APP-PLUS -->
						<view
							class="choose-image-btn"
							@click="onUploadServiceReceiptImageForApp"
							v-if="serviceReceiptImageUrlList.length < 10"
						>
							点击选择图片({{ serviceReceiptImageUrlList.length }}/10)
						</view>
						<!-- #endif -->
					</uni-forms-item>

					<!-- 图片列表 -->
					<view
						class="file-list"
						v-if="
							serviceReceiptImageUrlList.length > 0 &&
							[fixedModule.c_item_install, fixedModule.c_item_repair].includes(
								endInfo.moduleId,
							)
						"
					>
						<view
							class="file-item"
							v-for="(img, imgIndex) in serviceReceiptImageUrlList"
							:key="imgIndex"
						>
							<image class="file" :src="img.path"></image>

							<view
								class="del-btn"
								@click="serviceReceiptImageUrlList.splice(imgIndex, 1)"
							>
								<uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</uni-forms>
		</view>
		<view class="submit-btn" @click="onSubmitClick" :style="submitBtnStyle">
			提交
		</view>

		<uni-popup ref="videoPreviewPopupInstance">
			<view class="video-preview-container">
				<view class="header">
					<view class="placeholder">
						<uni-icons type="closeempty" size="16"></uni-icons>
					</view>
					<view class="title">视频预览</view>
					<view class="close-btn" @click="closeVideoPreviewPopup">
						<uni-icons type="closeempty" size="16"></uni-icons>
					</view>
				</view>
				<view class="content">
					<video :src="currentPreviewVideoPath"></video>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style scoped lang="scss">
	:deep(.uni-easyinput) {
		.uni-easyinput__content {
			border: none;

			.uni-easyinput__content-textarea {
				margin: 0;
				padding: 16rpx 0 0 0;
				min-height: 54rpx;

				.uni-textarea-wrapper {
					.uni-textarea-textarea,
					.uni-textarea-placeholder {
						text-align: right;
					}
				}
			}

			.uni-easyinput__content-input {
				.uni-input-wrapper {
					.uni-input-input,
					.uni-input-placeholder {
						text-align: right;
					}
				}
			}
		}
	}

	:deep(.uni-section) {
		.uni-section-header {
			padding: 0;
		}
	}

	:deep(.uni-stat__select) {
		.uni-stat-box {
			.uni-select {
				padding: 0;
				border: none;

				.uni-select__input-box {
					display: flex;
					column-gap: 12rpx;

					.uni-select__input-text {
						text-align: right;
					}
				}

				.uni-select__selector {
					width: fit-content;
					right: 0;
					left: unset;

					.uni-popper__arrow {
						left: 50%;
						transform: translate(-50%, 0);
					}

					.uni-select__selector-scroll {
						width: fit-content;

						.uni-scroll-view {
							width: fit-content;

							.uni-scroll-view-content {
								width: fit-content;

								.uni-select__selector-item {
									width: fit-content;
									display: flex;
									justify-content: flex-end;
								}
							}
						}
					}
				}
			}
		}
	}

	:deep(.uni-data-checklist) {
		height: 100%;

		.checklist-group {
			height: 100%;
			column-gap: 16rpx;
			justify-content: flex-end;

			.uni-label-pointer {
				margin: 0 !important;

				.checklist-content {
					.checklist-text {
						margin-left: 8rpx !important;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	:deep(.uni-file-picker) {
		.uni-file-picker__files {
			.files-button {
				height: 72rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}

		.uni-file-picker__lists {
			display: none;
		}
	}

	.video-preview-container {
		width: 90vw;
		height: 50vh;
		background-color: #fff;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		row-gap: 24rpx;

		.header {
			display: flex;
			justify-content: space-between;

			.placeholder {
				opacity: 0;
			}
		}

		.content {
			flex: 1;
			height: 0;
		}
	}

	.apply-end-order {
		background-color: #fafafa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		row-gap: 24rpx;
		overflow: auto;

		.end-info {
			background-color: #fff;
			padding: 24rpx;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			row-gap: 8rpx;

			.title {
				display: flex;
				column-gap: 12rpx;

				.order-no {
					font-weight: bold;
				}

				.module {
					color: #00c0c0;
				}
			}

			.info-line {
				display: flex;
				column-gap: 12rpx;

				.label {
					color: gray;
				}
			}
		}

		.custom-field-list {
			background-color: #fff;

			:deep(.uni-forms) {
				height: 100%;
				width: 100%;
				overflow: auto;
				box-sizing: border-box;
				padding: 24rpx;

				.form-content {
					display: flex;
					flex-direction: column;
					row-gap: 32rpx;

					.uni-forms-item {
						margin: 0;
						border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
						box-sizing: border-box;

						.uni-forms-item__label {
							font-size: 24rpx;
							white-space: nowrap;
							width: fit-content !important;
							color: gray;
						}

						.uni-forms-item__content {
							font-size: 24rpx;

							.send-verification-code {
								display: flex;
								align-items: center;
								column-gap: 12rpx;

								.send-btn {
									color: #007cff;
								}
							}

							.choose-image-btn {
								width: 100%;
								height: 100%;
								display: flex;
								justify-content: flex-end;
								align-items: center;
								color: #007cff;
							}

							.select-rate {
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: flex-end;
							}

							.uni-forms-item__error {
								left: unset;
								right: 0;
							}
						}
					}

					.file-list {
						display: flex;
						flex-wrap: wrap;
						gap: 20rpx;

						.file-item {
							position: relative;

							.file {
								width: 140rpx;
								height: 140rpx;
							}

							.del-btn {
								width: 40rpx;
								height: 40rpx;
								background-color: rgba(0, 0, 0, 0.4);
								position: absolute;
								top: 0;
								right: 0;
								display: flex;
								justify-content: center;
								align-items: center;
							}

							.file-pdf {
								background-color: rgb(250, 81, 81);
								width: 140rpx;
								height: 140rpx;
								line-height: 140rpx;
								text-align: center;
								font-weight: bold;
								color: #fff;
							}
						}
					}
				}
			}
		}

		.submit-btn {
			width: 100%;
			min-height: 72rpx;
			background-color: #007cff;
			border-radius: 72rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 24rpx;
		}
	}
</style>
